import React, { Component } from 'react';
import {AtIcon} from "taro-ui";
import Taro from '@tarojs/taro';
import {View, Text, Button, Block, Navigator, Image} from '@tarojs/components'
import {http} from '../utils/http'
import {
  GET_WORDS_INFO, TECH_SUPPORT, RESOURCE_URL
} from '../constants/api'
import {SupportInfoType, WordInfo} from '../utils/server.interface'
import {platform} from "../utils/platform-settting.service";
import {vcmonitor} from "../utils/tools";
import {h5Wx} from "../utils/h5.service";
import GzhAuth from "../components/gzh-auth/gzh-auth"
import './list.scss'

export default class CheckTicket extends Component {
  state: {
    wordInfo: WordInfo[] | false
    support: false | SupportInfoType
    id: number
    show: boolean
  } = {
    wordInfo: false,
    support: false,
    id: 0,
    show: false
  }

  async UNSAFE_componentWillMount() {
    if (process.env.TARO_ENV === 'h5') {
      await h5Wx.getConfig()
      const shareData = {
        title: platform.info.platformName,
        desc: "线路推广",
        link: window.location.origin + '/words/detail?id=' + Taro.getCurrentInstance().router.params.id,
        imgUrl: platform.info.platformLogo
      }
      h5Wx.share(shareData)
    }
    const support = await http.get(TECH_SUPPORT, {})
    this.setState({support})

  }

  async componentDidShow() {
    vcmonitor(this)
    const id = Taro.getCurrentInstance().router.params.id
    const wordInfo = await http.get(GET_WORDS_INFO, {id})
    this.setState({wordInfo, id})
  }

  shareWow() {
    const show = this.state.show
    this.setState({
      show: !show
    })
  }

  onShareAppMessage() {
    return {
      title: "线路推广",
      path: '/words/detail?id=' + this.state.id + `&sKey=${Taro.getStorageSync('sKey' || '')}`
    }
  }

  lookFile(url, name, type, id) {
    const filePath = RESOURCE_URL + url
    if (type == 'PDF' || type == 'WORD') {
      Taro.navigateTo({
        url: '/words/preview?pid=' + this.state.id + '&id=' + id + '&name=' + name + '&url=' + url + '&type=' + type
      })
    } else if (type == "EXCEL") {
      this.look2(url)
    } else {
      Taro.previewImage({
        current: filePath, // 当前显示图片的http链接
        urls: [filePath] // 需要预览的图片http链接列表
      })
    }
  }

  look2(url) {
    if (process.env.TARO_ENV === 'h5') {
      window.location = RESOURCE_URL + url
    } else {
      Taro.downloadFile({
        // 示例 url，并非真实存在
        url: RESOURCE_URL + url,
        success: function (res) {
          const filePath = res.tempFilePath
          Taro.openDocument({
            filePath: filePath,
            success: function (res) {
              console.log('打开文档成功')
            }
          })
        }
      })
    }
  }

  render() {
    const {show, wordInfo, support} = this.state
    return (
      <View className='words-root'>
        <GzhAuth />
        {wordInfo && wordInfo.length > 1 &&
        <View className='wordInfo-list-box'>
          <View className='wordInfo-list'>
            {wordInfo.map((item, index) =>
              <View className='wordInfo-item'
                onClick={this.lookFile.bind(this, item.url, item.name, item.type, item.resource_id)}
                key={index}
              >
                <View className='wordInfo-icon'>
                  {item.type == 'PDF' &&
                  <Image mode='widthFix' src='https://resource.ivcheng.com/resources/images/words_pdf.png' />}
                  {item.type == 'WORD' &&
                  <Image mode='widthFix' src='https://resource.ivcheng.com/resources/images/words_word.png' />}
                  {item.type == 'EXCEL' &&
                  <Image mode='widthFix' src='https://resource.ivcheng.com/resources/images/words_excel.png' />}
                  {item.type != 'WORD' && item.type != 'PDF' && item.type != 'EXCEL' &&
                  <Image mode='widthFix' src='https://resource.ivcheng.com/resources/images/words_pig.png' />}
                </View>
                <View className='wordInfo-item-info'>
                  <View className='wordInfo-item-name'>{item.name}</View>
                  <View
                    className='wordInfo-item-size'
                  >{item.file_size > (512 * 1024) ? `${(item.file_size / 1024 / 1024).toFixed(2)}MB` : `${(item.file_size / 1024).toFixed(2)}KB`}</View>
                </View>
              </View>
            )}
          </View>
        </View>
        }
        {wordInfo && wordInfo.length == 1 &&
        <View className='wordInfo'>
          <View>
            <View className='wordInfo-icon'>
              {wordInfo[0].type == 'PDF' &&
              <Image mode='widthFix' src='https://resource.ivcheng.com/resources/images/words_pdf.png' />}
              {wordInfo[0].type == 'WORD' &&
              <Image mode='widthFix' src='https://resource.ivcheng.com/resources/images/words_word.png' />}
              {wordInfo[0].type == 'EXCEL' &&
              <Image mode='widthFix' src='https://resource.ivcheng.com/resources/images/words_excel.png' />}
              {wordInfo[0].type != 'WORD' && wordInfo[0].type != 'PDF' && wordInfo[0].type != 'EXCEL' &&
              <Image mode='widthFix' src='https://resource.ivcheng.com/resources/images/words_pig.png' />}
            </View>
            <View className='wordInfo-item-info'>
              <View className='wordInfo-item-name'>{wordInfo[0].name}</View>
              <View
                className='wordInfo-item-size'
              >{wordInfo[0].file_size > (512 * 1024) ? `${(wordInfo[0].file_size / 1024 / 1024).toFixed(2)}MB` : `${(wordInfo[0].file_size / 1024).toFixed(2)}KB`}</View>
            </View>

            {wordInfo[0].type == "EXCEL" ?
              <Block>
                {process.env.TARO_ENV === 'h5' ?
                  <a className='wordInfo-item-look' href={'https://resource.ivcheng.com/' + wordInfo[0].url}>查看</a>
                  :
                  <View className='wordInfo-item-look' onClick={this.look2.bind(this, wordInfo[0].url)}>查看</View>
                }

                <Navigator className='wordInfo-item-look'
                  url={'/words/downlode?url=' + wordInfo[0].url}
                >下载</Navigator>
              </Block>
              :
              <View className='wordInfo-item-look'
                onClick={this.lookFile.bind(this, wordInfo[0].url, wordInfo[0].name, wordInfo[0].type, wordInfo[0].resource_id)}
              >查看</View>
            }
          </View>
        </View>
        }
        <View className='support-wrap'>
          {process.env.TARO_ENV === 'h5' ?
            <Button onClick={this.shareWow.bind(this)} className='support-wrap-btn' plain><AtIcon prefixClass='xxhz'
              value='fenxiang'
              size='15'
              color='#306cc0'
            ></AtIcon>
              <Text>分享</Text></Button>
            :
            <Button className='support-wrap-btn' plain openType='share'><AtIcon prefixClass='xxhz' value='fenxiang'
              size='15' color='#306cc0'
            ></AtIcon>
              <Text>分享</Text></Button>
          }
          {support && <View className='support'>
            <View
              className='support-title'
            ><Text>{support.support_title.replace(/提供技术支持/g, "") || ''}</Text>提供技术支持</View>
          </View>
          }
        </View>
        {show && <View className='H5shareBox' onClick={this.shareWow.bind(this)}>
          <Image className='H5shareImg' src='https://resource.ivcheng.com/resources/images/H5sharebj.png'
            mode='widthFix'
          ></Image>
          <View className='H5shareBtn'>我知道了</View>
        </View>}
      </View>
    );
  }
}
